<template>
  <div class="box1">
    <el-tabs type="border-card">
      <el-tab-pane label="洪水预报">
        <div class="flood-form">
          <div class="form-item">
            <span class="name">模&nbsp;&nbsp;型&nbsp;&nbsp;名&nbsp;称&nbsp;:</span>
            <span>
              <el-select
                v-model="form.chlMid"
                class="m-2"
                placeholder="请选择"
                @change="handleChangeWaterFlood"
              >
                <el-option
                  v-for="item in modelList"
                  :key="item.id"
                  :label="item.modelName"
                  :value="item.id"
                />
              </el-select>
            </span>
          </div>
          <div class="form-item">
            <span class="name">模型参数方案:</span>
            <el-select
              v-model="form.chlScid"
              class="m-2"
              placeholder="请选择"
              @change="handleChangeParamsScheme"
            >
              <el-option
                v-for="item in schemeParamsList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <span class="btn-color" @click="handleSearchParams">查看方案参数</span>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 弹窗 -->
    <ConfigParagm
      :dialogVisible="showDialog"
      @closeDialog="closeDig"
      :paramsDetail="paramsDetail"
    />
    <!-- 时空变源参数 -->
    <paramsSkby ref="paramsSkbyRef" />
  </div>
</template>

<script setup>
import { ref, watch, onMounted, defineExpose } from 'vue'
import { storeToRefs } from 'pinia'
import {
  getAreaSecList,
  getPmSchemes,
  saveAreaSchemes,
  getCalcModelType
} from '@/services/modules/compute-methods'
import ConfigParagm from '../../configInfo/cpns/configParagm.vue'
import { getXajParamsDetail } from '@/services/modules/model-config'
import paramsSkby from '@/components/app-publicui/params-skby.vue'
import { getModelList } from '@/services/modules/home'
// pinna
import { useModelParams } from '@/store/modules/dispatch-manage'
const useModelParamsStore = useModelParams()
const { saveFormParams, modelSchemeList, modelSchemeDetail } = storeToRefs(useModelParamsStore)
const props = defineProps({
  // 选择的模型类型
  modelType: {
    type: Number,
    default: 0
  },
  // 选择的方案信息
  schemeInfo: {
    type: Object,
    default: () => {}
  },
  // 选择的断面信息
  secCurrentObject: {
    type: Object,
    default: () => {}
  }
})
const paramsSkbyRef = ref(null)
let showDialog = ref(false)
let paramsDetail = ref({})
let floodParams = ref('')
const form = ref({
  // 模型id
  chlMid: '',
  // 参数方案id
  chlScid: ''
})
//参数方案详情
const schemeParamArr = ref([])
// 模型列表
const modelList = ref([])
// 参数方案列表
const schemeParamsList = ref([])

//获取模型列表 modelType模型类型
const getModelNameList = (modelType) => {
  return new Promise((resolve, reject) => {
    getModelList({ typeId: modelType }).then((res) => {
      if (res.code === 200) {
        modelList.value = res.data
        modelList.value.push({ id: 0, modelName: '无' })
        form.value.chlMid = modelList.value[0].id
        resolve(modelList.value)
      }
    })
  })
}

//获取参数方案
const getPmSchemesList = () => {
  return new Promise((resolve, reject) => {
    schemeParamsList.value = []
    form.value.chlScid = ''
    getPmSchemes({
      // 选择的模型类型
      modelType: props.modelType,
      mid: form.value.chlMid,
      // 断面编码
      blkcd: props.secCurrentObject.blkcd,
      // 流域id
      zid: props.schemeInfo.zId
    }).then((res) => {
      if (res.code === 200 && res.data?.length) {
        schemeParamsList.value = res.data
        schemeParamsList.value.push({ id: 0, name: '无' })
        if (props.modelType === -1) {
          saveFormParams.value.forEach((child, index) => {
            if (child.blkcd == props.secCurrentObject.blkcd) {
              saveFormParams.value.splice(index, 1, {
                ...child,
                chlMid: form.value.chlMid,
                chlScid: res.data[0].id
              })
            }
          })
        } else {
          saveFormParams.value.forEach((child, index) => {
            if (child.blkcd == props.secCurrentObject.blkcd) {
              saveFormParams.value.splice(index, 1, {
                ...child,
                chlMid: form.value.chlMid
              })
            }
          })
        }
        resolve(schemeParamsList.value)
      } else {
        schemeParamsList.value.push({ id: 0, name: '无' })
        form.value.chlScid = schemeParamsList.value[0].id
      }
    })
  })
}
//关闭
const closeDig = (v) => {
  showDialog.value = v
}
function handleSearchParams() {
  if (form.value.chlMid == 1) {
    paramsSkbyRef.value.handleOpenParams(undefined, props.secCurrentObject.blkcd, {
      paramsName: floodParams.value,
      paramsId: form.value.pmid
    })
  } else if (form.value.chlMid == 2) {
    getXajParamsDetail({
      scid: form.value.chlScid
    }).then((res) => {
      if (res.code === 200) {
        paramsDetail.value = res.data
        if (res.data) {
          showDialog.value = true
          console.log('66', showDialog)
        }
      }
    })
  }
}
async function handleChangeParamsScheme(item) {
  form.value.chlScid = item
  floodParams.value = schemeParamsList.value.filter((e) => {
    return e.id == item
  })[0].name
  form.value.pmid = schemeParamsList.value.filter((e) => {
    return e.id == item
  })[0].pmid
  saveFormParams.value.forEach((i, t) => {
    if (i.blkcd == props.secCurrentObject.blkcd) {
      saveFormParams.value.splice(t, 1, {
        ...i,
        chlMid: form.value.chlMid,
        chlScid: form.value.chlScid,
        pmid: form.value.pmid
      })
    }
  })
}

async function handleChangeWaterFlood(item) {
  form.value.chlMid = item
  let filterScheme = modelSchemeList.value.filter((e) => {
    return e.blkcd == props.secCurrentObject.blkcd && e.mid == form.value.chlMid
  })
  schemeParamsList.value = filterScheme
  if (schemeParamsList.value.length) {
    form.value.chlScid = schemeParamsList.value[0].id
    form.value.pmid = schemeParamsList.value[0].pmid
    floodParams.value = schemeParamsList.value.filter((e) => {
      return e.id == form.value.chlScid
    })[0].name
  } else {
    floodParams.value = '无'
    form.value.chlScid = 0
    form.value.pmid = undefined
  }
  saveFormParams.value.forEach((i, t) => {
    if (i.blkcd == props.secCurrentObject.blkcd) {
      saveFormParams.value.splice(t, 1, {
        ...i,
        chlMid: form.value.chlMid,
        chlScid: form.value.chlScid,
        pmid: form.value.pmid
      })
    }
  })
}

//过滤模型参数方案
const handlFilterModelScheme = () => {
  return new Promise((resolve, reject) => {
    let filterScheme = modelSchemeList.value.filter((e) => {
      return e.blkcd == props.secCurrentObject.blkcd && e.mid == form.value.chlMid
    })

    schemeParamsList.value = filterScheme
    if (schemeParamsList.value.length) {
      // form.value.chlScid = schemeParamsList.value[0].id
    } else {
      floodParams.value = '无'
      form.value.chlScid = 0
      form.value.pmid = undefined
    }
    resolve(schemeParamsList.value)
  })
}
// 判断是编辑还是新建
const checkIsEdit = async () => {
  if (!props.schemeInfo.row.id) {
    await getModelNameList(props.modelType)

    saveFormParams.value.forEach((item) => {
      if (item.blkcd == props.secCurrentObject.blkcd) {
        form.value.chlMid = item.chlMid
        form.value.chlScid = item.chlScid
        form.value.pmid = item?.pmid
        floodParams.value = item.chlScidName
      }
    })
    handlFilterModelScheme()

    // 如果是新建 则默认选中第一个模型 并且通过它调用参数方案列表 将参数方案列表默认选第一个
  } else {
    await getModelNameList(props.modelType)

    saveFormParams.value.forEach((item) => {
      if (item.blkcd == props.secCurrentObject.blkcd) {
        form.value.chlMid = item.chlMid
        form.value.chlScid = item.chlScid
      }
    })

    await handlFilterModelScheme()
    floodParams.value = schemeParamsList.value.filter((e) => {
      return e.id == form.value.chlScid
    })[0]?.name
    form.value.pmid = schemeParamsList.value.filter((e) => {
      return e.id == form.value.chlScid
    })[0]?.pmid
    // 如果是编辑
  }
}
// 监听模型类型变化,断面变化，通过模型类型获取模型列表
watch(
  [() => props.modelType, () => props.secCurrentObject],
  async ([newModelType, newSecCurrentObject], [oldModelType, oldSecCurrentObject]) => {
    checkIsEdit()
  },
  {
    deep: true
  }
)
// watch(
//   () => props.schemeParamDetail,
//   async () => {
//     // 根据模型类型 获取模型列表
//     await getModelNameList(props.modelType)
//     await getPmSchemesList()
//     schemeParamArr.value = props.schemeParamDetail
//     saveFormParams.value = schemeParamArr.value.map((child) => {
//       return {
//         blkcd: child.blkcd,
//         chlMid: child.chlMid,
//         chlScid: child.chlScid
//       }
//     })
//     schemeParamArr.value.forEach((item) => {
//       if (item.blkcd == props.secCurrentObject.blkcd) {
//         form.value.chlMid = item.chlMid
//         form.value.chlScid = item.chlScid
//       }
//     })
//   },
//   {
//     deep: true
//   }
// )
</script>

<style lang="less" scoped>
.box1 {
  width: 100%;
  height: 100%;
}
:deep(.el-tabs--border-card) {
  height: 100%;

  .el-tabs__content {
    height: calc(100% - 60px);

    .el-tab-pane {
      height: 100%;

      .flood-form {
        padding: 15px;

        .form-item {
          height: 50px;

          .el-select {
            width: 350px;
          }

          .btn-color {
            cursor: pointer;
            color: #409eff;
            margin-left: 50px;
          }

          .name {
            color: grey;
            margin-right: 20px;
          }
        }
      }
    }
  }
}
</style>
